<template>
  <UniPopup ref="contactReviewer" @change="change">
    <view class="contact_reviewer">
      <view class="contact_title">{{ title }}</view>
      <!-- 最多显示四条,超出滚动 -->
      <scroll-view scroll-y class="contact_scroll">
        <view v-for="(item, index) in callList" :key="index" class="contact_forbox">
          <view class="disFlxAC">
            <view class="avatarBox">
              <Images :src="item?.avatar" width="100rpx" height="100rpx"></Images>
            </view>
            <view class="ml-20">
              <view class="fz-16 ov-1">{{ item.userName }}</view>
              <view class="mt-2 phone">{{ item.phonenumber }}</view>
            </view>
          </view>
          <view class="pl-30 py-10 callIcon" @click="call(item.phonenumber)">
            <image src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/callIcon.png" style="width: 52rpx; height: 52rpx" />
          </view>
        </view>
      </scroll-view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { getCurrentInstance, watch, ref } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import Images from '@/components/TImage/index.vue';
  import { getAuditUserList } from '@/api/membership';
  const props = defineProps({
    // 是否显示
    popupShow: propTypes.bool.def(false),
    // 标题
    title: propTypes.string.def('联系审核人员'),
    // 阶段查询联系人员
    level: propTypes.number.def(1),
  });
  const _this = getCurrentInstance();
  const emit = defineEmits(['close']);
  const callList = ref();

  watch(
    () => props.popupShow,
    (val) => (val ? openPopup('contactReviewer') : closePopup('contactReviewer')),
  );

  const openPopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).open(direction);
    getCallList();
  };

  const closePopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).close(direction);
  };

  function change(e: { show: boolean; type: string }) {
    const { show } = e;
    !show && emit('close');
  }
  function getCallList() {
    getAuditUserList(props.level).then((r) => {
      callList.value = r;
    });
  }

  // 呼叫专员
  function call(phone: string) {
    uni.makePhoneCall({
      phoneNumber: phone, //仅为示例
    });
  }
</script>
<style lang="scss" scoped>
  .contact_reviewer {
    background-color: #fff;
    padding: 18rpx;
    border-radius: 20rpx;
    width: 673rpx;

    .contact_title {
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      padding: 38rpx 0 16rpx 0;
    }

    .contact_scroll {
      max-height: 744rpx;
    }

    .contact_forbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 30rpx;
      padding: 38rpx 0;

      .phone {
        color: #aaabab;
      }
      .callIcon {
        flex-shrink: 0;
      }
    }

    .contact_forbox + .contact_forbox {
      border-top: solid 1px #dddddd;
    }
    .avatarBox {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
      background-color: #f5f5f5;
    }
  }
</style>
